<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name="author" content="HeChuan" >
        <title>Main Page</title>
        <!-- 引入外联样式文件 -->
        <link rel="stylesheet" href="/css/my.css">
        <style>
            /* 弹性盒子: 在盒子模型（width,height,padding,margin,border,border-radiu）基础之上，增强子元素的对齐方式 */
           
            .img-circle{
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
            .logo {
                height: 45px;
            }
            /* display: flex; 将一个标签的类型修改为弹性盒子（对齐，自动计算子标签的所占空间-自动排列） */
           /* justify-  主轴的对齐方式(row-水平轴为主, column-垂直轴为主) 
              align-items 副轴的对齐方式
              content 代表子元素，items代表文本内容
           */
            #toper{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                height: 50px;
                border-bottom: 1px solid lightgray;
            }
            /*  flex-wrap: wrap; 一行不足排列时，自动换行,  nowrap 不换行*/
            .row{
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
            }
            .row-vcenter{
                align-items: center;
            }
            #userInfo{
                margin: 0 10px;
            }
            #main{
                height: 100%;
            }
            #footer{
                height: 30px;
                border-top: 1px solid lightgray;
                text-align: center;
            }

            #container{
                height: 96%;
                display: flex;
                flex-direction: column;
            }

            #menu{
                width: 240px;
                height: 100%;
                border-right: 1px solid lightgray;
            }

            #myframe {
                height: 95%;
                width: 95%;
            }
            ul,li {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            li {
                padding: 10px;
                margin: 10px;
            }
            li>a{
                color: rgb(170, 49, 49);
                text-decoration: none;
            }
            li:hover{
                background-color: rgb(211, 173, 60);
            }

            #useractions{
                display: none;
                position: absolute;
                top: 80px;
                right: 20px;
                background-color: #fff;
                border: 1px solid lightblue;
                padding: 10px 5px;
                opacity: 0.8;
                z-index: 10;
                cursor: pointer;
            }
            body {
                background-image: url('/images/ruihe.jpg');
                background-size: 100% 100%;
                /* background-repeat: no-repeat; */
                filter:brightness(100%);/*调整亮度为100%*/
            }

        </style>
    </head>
    <body>
        <div id="container">
            <div id="toper">
                <img class="logo" src="/images/icon.jpg">
                <div class="row row-vcenter">
                    <div id="useractions">
                        <a onclick="localStorage.clear();location.href='/login.html';">退出登录</a>
                    </div>
                    <b id="userInfo">xxx</b>
                    <img id="userHead" src="/images/head1.jpg" class="img-circle" onclick="useractions.style='display:block;';" onmouseleave="setTimeout(()=>{useractions.style='display:none;';}, 1000);">
                </div>
                
            </div>
            <div id="main" class="row">
                <div id="menu">
                    <h3>我的功能模块</h3>
                    <!-- ul 无序列表, ol有序列表，列表项都是li -->
                    <ul>
                        <li>
                            <a target="content_frame" href="rules.html">过滤规则</a>
                        </li>
                        <li>
                            <a target="content_frame" href="arp.html">ARP表</a>
                        </li>
                        <li>
                            <a target="content_frame" href="keywords.html">敏感词规则</a>
                        </li>
                        <li>
                            <a target="content_frame" href="route.html">网关数据</a>
                        </li>
                        <li>
                            <a target="content_frame" href="words.html">捕获敏感数据</a>
                        </li>
                    </ul>
                </div>
                <!-- iframe 网页中的内嵌窗口，a标签的target属性中使用name的属性值
                  <a href="xxx" target="content_frame">xxx</a> 
                -->
                <iframe id="myframe" name="content_frame" frameborder="0"></iframe>
            </div>
            <div id="footer">
                <b>版本所有@长乐未央</b><br>
                <i>2024-10-10</i>
            </div> 
        </div>    
        
        <script>
            window.onload = function(){
                if(localStorage.getItem("uid") == null){
                    // 未登录 
                    location.href = "/login.html";
                }else{
                    userInfo.innerText = localStorage.nickname;
                    userHead.setAttribute("src", localStorage.head);
                }
            }
        </script>
    </body>
</html>
